.navigation {
  @apply box-border fixed top-0 left-0 right-0 w-page z-99999;
  .navigationBar {
    @apply box-border flex  flex-row items-center;
  }
}
.topInfo {
  height: 430px;
  @apply box-border relative;
  .bgWrap {
    @apply absolute left-0 right-0 top-0 bottom-0 box-border;
    .bg {
      width: 100%;
      @apply block;
    }
  }
  .topicTitle {
    @apply mt-[48px] text-[#FFFFFF] text-[40px] font-500;
  }
  .topicInfo {
    @apply flex flex-row items-center box-border mt-[32px];
    .topicView {
      @apply text-[#FFFFFF] text-[28px];
    }
    .colloct {
      width: 160px;
      height: 64px;
      @apply flex ml-auto rounded-[32px] bg-[#FF8615] gap-[8px] flex-row justify-center items-center box-border text-[#FFFFFF] text-[28px];
      &.collocted {
        border: 1px solid rgba(255, 255, 255, 0.6);
        @apply bg-transparent;
      }
    }
  }
}
.topicDesc {
  border-radius: 32px 32px 0 0;
  margin-top: -40px;
  @apply bg-[#FFFFFF] relative z-30 px-[32px] pb-[32px] box-border;
  .topicDescLabel {
    @apply text-[#333333] py-[40px] text-[36px] font-500;
  }
  .topicDescContent {
    line-height: 40px !important;
    @apply text-[#333333] text-[28px];
  }
}
.filter {
  @apply text-[#666666] relative py-[20px] box-border text-[32px] font-normal;
  &::after {
    content: "";
    height: 6px;
    @apply box-border rounded-[10px] absolute bottom-0 left-[8px] right-[8px];
  }
  &.filterActive {
    @apply text-[#333333] font-600;
    &::after {
      @apply bg-[#5278FD];
    }
  }
}
.bottomInfo {
  border-radius: 32px 32px 0 0;
  @apply box-border bg-white pb-[16px];
}
.contentSpecials {
  @apply whitespace-nowrap mt-[48px];
  .contentSpecial {
    @apply inline-block;
    &:first-child {
      @apply pl-[32px];
    }
    .inner {
      width: 312px;
      height: 162px;
      padding-top: 48px;
      background: radial-gradient(102.73% 100.07% at 53.64% 0%, #bfe9fc66 0%, #f7f7f700 100%),
        #f1f5f9;
      @apply block box-border rounded-[16px] mr-[16px];
      .innerTitle {
        @apply text-[#333333] font-500 text-[30px] pl-[16px];
      }
      .innerDesc {
        @apply text-[#999999] text-[24px] font-normal mt-[16px] pl-[24px];
      }
      &.inner_1 {
        .innerTitle {
          border-left: 8px solid #5278fd99;
        }
      }
      &.inner_2 {
        .innerTitle {
          border-left: 8px solid #05d99f99;
        }
      }
      &.inner_3 {
        .innerTitle {
          border-left: 8px solid #9255f899;
        }
      }
      &.inner_4 {
        .innerTitle {
          border-left: 8px solid #f95c0099;
        }
      }
      &.inner_5 {
        .innerTitle {
          border-left: 8px solid #5278fd99;
        }
      }
      &.inner_6 {
        .innerTitle {
          border-left: 8px solid #9255f899;
        }
      }
    }
  }
}
.headImageWrap {
  border: 2px solid #fff;
  @apply block w-68px h-68px rounded-full box-border;
}
